<!--  -->
<template>
  <div class="container">
    <navbar
      class="de-navbar"
      :vaniconL="true"
      :noRight="true"
      :noLeft="false"
      :vaniconR="true"
      iconNameL="arrow-left"
      iconNameR="setting-o"
      @clickLeft="goBack"
      bgcolor="rgb(55, 81, 255) !important"
      bgImage="linear-gradient(rgb(55, 81, 255) 0%, rgb(76, 99, 255) 50%, rgb(91 112 255) 75%, rgb(107 127 255) 100%) !important"
      >课程详情</navbar
    >
    <div style="height: 0.45rem"></div>
    <div class="content">
      <div class="head">
        <van-image
          width="100%"
          height="1.9rem"
          :src="detailList && detailList.banner"
        />
        <p class="titles">
          {{ detailList && detailList.title }}
        </p>
      </div>
      <van-collapse :accordion="true" v-model="activeNames">
        <van-collapse-item
          v-for="(item, index) in treeList"
          :key="index"
          :title="item.title"
          :name="index"
          >{{ item.content }}</van-collapse-item
        >
      </van-collapse>
      <div class="center">
        <div class="teacher">
          <p class="title">老师介绍</p>
          <div class="p-box">
            <ul class="box">
              <li class="child" v-for="(item, index) in teachList" :key="index">
                <van-image
                  width="0.8rem"
                  height="0.8rem"
                  round
                  :src="item.image"
                />
                <div class="text">
                  <p>{{ item.userName }}</p>
                  <p>
                    {{ item.introduction }}
                  </p>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div class="class">
          <p class="text">课程介绍</p>
          <p class="detail">
            {{ detailList && detailList.content }}
          </p>
          <van-image
            width="100%"
            height="2rem"
            :src="detailList && detailList.banner"
          />
        </div>
        <p class="tips">报名成功后会有客服与您联系</p>
      </div>
    </div>
    <van-goods-action>
      <!-- <van-goods-action-icon icon="chat-o" text="客服" @click="onClickIcon" /> -->
      <van-goods-action-button
        v-if="signFlag"
        text="立即报名"
        color="linear-gradient(to right, #32d628, #16ce00)"
        @click="onClickButton"
      /><van-goods-action-button
        v-else
        @click="cancelSign"
        text="取消报名"
        type="danger"
      /> </van-goods-action
    ><van-popup
      v-model="kfshow"
      closeable
      position="bottom"
      :style="{ height: '50%' }"
    >
      <div class="kefuc">
        <van-image
          width="2rem"
          height="2rem"
          src="https://img.yzcdn.cn/vant/cat.jpeg"
        />
        <p>添加客服微信咨询课程</p>
      </div>
    </van-popup>
    <van-popup
      v-model="signShow"
      closeable
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div class="bao-form">
        <van-form @submit="onSubmit">
          <van-field
            v-model="username"
            name="username"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }]"
          />
          <van-field
            v-model="phone"
            name="phone"
            label="手机号"
            placeholder="手机号"
            :rules="[
              { pattern: pattern, required: true, message: '请填写正确手机号' },
            ]"
          />
          <van-field
            v-model="wechat"
            name="wechat"
            label="微信号"
            placeholder="微信号"
            :rules="[{ required: true, message: '请填写微信号' }]"
          />
          <van-field
            v-model="email"
            name="email"
            label="邮箱"
            placeholder="邮箱"
            :rules="[
              { pattern: pattern1, required: true, message: '请填写正确邮箱' },
            ]"
          />
          <div style="margin: 16px">
            <van-button round block type="info" native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </van-popup>
  </div>
</template>

<script>
import navbar from "@/components/navbar";
import {
  getClassby,
  getClassDetails,
  getInstructorby,
  classEnroll,
} from "@/api/doctor";
import {
  Toast,
  Dialog,
  GoodsAction,
  GoodsActionIcon,
  GoodsActionButton,
  Collapse,
  CollapseItem,
} from "vant";
import { mapGetters } from "vuex";
export default {
  name: "classDetail",
  data() {
    return {
      kfshow: false,
      signShow: false,
      detailList: null,
      treeList: [],
      teachList: [],
      activeNames: ["0"],
      username: "",
      phone: "",
      email: "",
      wechat: "",
      pattern: /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-7|9])|(?:5[0-3|5-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1|8|9]))\d{8}$/,
      pattern1: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
      signFlag: true,
    };
  },

  components: { navbar },

  computed: {
    ...mapGetters(["userData", "classNum"]),
  },

  created() {
    this.getData(this.$route.params.classId);
  },
  mounted() {},

  methods: {
    // 返回上一页
    goBack() {
      // this.$router.replace({ path: "/Training" });
      // this.$store.commit("list/SET_CLASSNUM", this.$route.params.classId);
      this.$router.go(-1);
    },
    onClickIcon() {
      this.kfshow = true;
    },
    //报名
    onClickButton() {
      this.signShow = true;
    },
    // 获取数据
    async getData(id) {
      const toast = Toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        overlay: true,
        message: "加载中",
      });
      let data = {
        classId: id,
        userId: JSON.parse(this.userData).id,
      };
      let res = await getClassby(data);
      if (res.data.status == 200) {
        this.detailList = res.data.info1;
        if (this.detailList.enroll == 1) {
          this.signFlag = false;
        }
        this.treeList = res.data.info3;
        this.teachList = res.data.info2;
        Toast.clear();
      } else {
        Toast.fail(res.data.msg);
      }
    },
    //报名
    onSubmit(values) {
      let data = {
        userId: JSON.parse(this.userData).id,
        classId: this.$route.params.classId,
        enroll: 1,
        userName: values.username,
        email: values.email,
        phone: values.phone,
        wechat: values.wechat,
      };
      classEnroll(data).then((res) => {
        if (res.data.status == 200) {
          Toast.success("报名成功");
          this.signFlag = false;
          this.username = "";
          this.phone = "";
          this.email = "";
          this.wechat = "";
          setTimeout(() => {
            this.signShow = false;
          });
        } else {
          Toast.fail("提交失败，重新提交");
        }
      });
    },
    //取消报名
    cancelSign() {
      let data = {
        userId: JSON.parse(this.userData).id,
        classId: this.$route.params.classId,
        enroll: 0,
      };
      classEnroll(data).then((res) => {
        if (res.data.status == 200) {
          Toast.success("取消成功");
          this.signFlag = true;
        } else {
          Toast.fail("提交失败，重新提交");
        }
      });
    },
  },
};
</script>
<style lang='scss' scoped>
@import "../../assets/css/utils";
.container {
  position: relative;
  height: 100%;
  background: #f5f5f5;
  & .content {
    width: 100%;
    padding-bottom: 0.5rem;
    & .head {
      margin-bottom: 0.1rem;
      & .titles {
        width: 95%;
        text-align: left;
        color: black;
        font-size: 0.2rem;
        margin: auto;
        margin-top: 0.1rem;
        word-break: break-all;
        line-height: 0.25rem;
      }
    }
    & .center {
      margin-top: 0.1rem;
      & .teacher {
        border-top: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
        margin-bottom: 0.1rem;
        padding: 0.1rem 0;
        & .title {
          text-align: left;
          font-size: 0.18rem;
          margin-left: 0.1rem;
          color: #3a21ff;
        }
        & .p-box {
          position: relative;
          overflow: hidden;
          overflow-x: scroll;
          // height: 1.6rem;
          & .box {
            margin: 0.1rem 0;
            padding-right: 0.1rem;
            float: left;
            list-style: none;
            display: inline-flex;
            // white-space: nowrap;
            & .child {
              float: left;
              margin-left: 0.1rem;
              background: #fff;
              border-radius: 0.1rem;
              padding: 0.1rem;
              display: inline-flex;
              width: 2.7rem;
              & .text {
                margin-left: 0.1rem;
                width: 65%;
                & p:nth-of-type(1) {
                  margin-top: 0.1rem;
                  font-size: 0.14rem;
                  text-align: left;
                }
                & p:nth-of-type(2) {
                  margin-top: 0.1rem;
                  margin-bottom: 0.05rem;
                  font-size: 0.12rem;
                  line-height: 0.16rem;
                  text-align: left;
                }
              }
            }
          }
        }
      }
      & .class {
        width: 95%;
        margin: auto;
        & .text {
          text-align: left;
          font-size: 0.18rem;
          color: #3a21ff;
        }
        & .detail {
          margin: 0.05rem 0;
          text-align: left;
          font-size: 0.16rem;
          line-height: 0.25rem;
        }
      }
      & .tips {
        margin: 0.1rem 0;
        font-size: 0.14rem;
        color: red;
      }
    }
  }
  & .kefuc {
    margin-top: 0.65rem;
    & p {
      font-size: 0.18rem;
      color: red;
      margin-top: 0.1rem;
    }
  }
}

.p-box::-webkit-scrollbar {
  display: none;
}
.van-collapse-item {
  text-align: left;
}
.bao-form {
  width: 95%;
  margin: auto;
  margin-top: 0.4rem;
}
</style>